<template>
  <div id="login">
    <ul class="login-box list-unstyled">
      <li>
        <span>加*为必填项</span>
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2" type="text" v-model="uname" placeholder="请输入用户名 *" />
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2" type="text" v-model="upwd" placeholder="请输入密码 *" />
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2" type="text" v-model="nickname" placeholder="请输入昵称" />
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2" type="text" v-model="phone" placeholder="请输入电话号码" />
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2" type="text" v-model="email" placeholder="请输入邮箱" />
      </li>
      <li class="my-3 text-center">
        <input class="input-box py-2 pl-2 w-100" type="button" value="注册" @click="reg" />
      </li>
      <li class="my-3 text-center" v-if="tip">
        <span>登录失败：用户名已存在</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      nickname: "",
      phone: "",
      email: "",
      tip: false,
    };
  },
  methods: {
    reg() {
      this.axios
        .post(
          "/user/reg",
          this.qs.stringify({
            uname: this.uname,
            upwd: this.upwd,
            nickname: this.nickname,
            phone: this.phone,
            email: this.email,
          })
        )
        .then((res) => {
          if (res.data.code == 201) {
            this.$store.commit("login", {
              uname: this.uname,
              upwd: this.upwd,
            });
            this.tip = false;
            this.$router.push("/");
          } else {
            this.tip = true;
            this.$commit("unlogin");
          }
        });
    },
  },
};
</script>

<style>
#reg {
  max-width: 1000px;
  margin: 0 auto;
}
</style>
